<template>
  <v-layout column>
    <v-flex 12>
      <v-data-table
        :headers="articalHeaders"
        :items="articals"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.title }}</td>
          <td>{{ props.item.tags }}</td>
          <td>{{ props.item.categories }}</td>
          <td>{{ props.item.images }}</td>
        </template>
      </v-data-table>
    </v-flex>
  </v-layout>
</template>
<script>
export default {
  name: 'ArticalList',
  data () {
    return {
      articalHeaders: [
        { text: 'Title', value: 'title', sortable: true, align: 'left' },
        { text: 'Tags', value: 'tags', sortable: false, align: 'left' },
        { text: 'categories', value: 'categories', sortable: false, align: 'left' },
        { text: 'images', value: 'images', sortable: false, align: 'left' }
      ],
      articals: [
        {
          title: 'xxxxxxxxx',
          tags: '1',
          categories: '1',
          images: '1'
        },
        {
          title: 'aaaaaaaa',
          tags: '2',
          categories: '2',
          images: '2'
        },
        {
          title: 'dddddddddddd',
          tags: '3',
          categories: '3',
          images: '3'
        }
      ]
    }
  }
}
</script>
<style></style>
